import React from 'react'
import { Row, Col, Card, Tag, Skeleton, Switch, Icon, Avatar } from 'antd'

export default class KimCard extends React.Component {
  state = {
    loading: true,
  };


  render() {
    const { loading } = this.state
    const gridStyle = {
      width: '25%',
      textAlign: 'center',
    };
    return <>
      <Card title='典型卡片 包含标题、内容、操作区域、栅格卡片'  >
        <div style={{ background: '#ECECEC', padding: '30px' }}>
          <Row gutter={16}>
            <Col span={8}>
              <Card title="Default size card" extra={<a href="#">More</a>}>
                <p>Card content</p>
                <p>Card content</p>
                <p>Card content</p>
              </Card>
            </Col>
            <Col span={8}>
              <Card size="small" title="Small size card" extra={<a href="#">More</a>} >
                <p>Card content</p>
                <p>Card content</p>
                <p>Card content</p>
              </Card>
            </Col>
          </Row>


        </div>
      </Card>

      <Card title='典型卡片 包含标题、内容、操作区域' style={{ marginTop: 10, }} >
        <div style={{ background: '#ECECEC', padding: '30px' }}>
          <Card title="Card title" bordered={false} style={{ width: 300 }}>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
          </Card>
        </div>
      </Card>

      <Card title='简洁卡片' style={{ marginTop: 10, }} >
        <Card style={{ width: 300 }}>
          <p>Card content</p>
          <p>Card content</p>
          <p>Card content</p>
        </Card>
      </Card>

      <Card title={<div>更灵活的内容展示可以利用&nbsp;<Tag>Card.Meta</Tag>支持更灵活的内容'</div>} style={{ marginTop: 10, }} >
        <Card
          hoverable
          style={{ width: 240 }}
          cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
        >
          <Card.Meta title="Europe Street beat" description="www.instagram.com" />
        </Card>
      </Card>

      <Card title='预加载的卡片' style={{ marginTop: 10, }} >
        <Switch checked={!loading} onChange={checked => this.setState({ loading: !checked })} />

        <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
          <Card.Meta
            avatar={
              <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            }
            title="Card title"
            description="This is the description"
          />
        </Card>

        <Card
          style={{ width: 300, marginTop: 16 }}
          actions={[
            <Icon type="setting" key="setting" />,
            <Icon type="edit" key="edit" />,
            <Icon type="ellipsis" key="ellipsis" />,
          ]}
        >
          <Skeleton loading={loading} avatar active>
            <Card.Meta
              avatar={
                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
              }
              title="Card title"
              description="This is the description"
            />
          </Skeleton>
        </Card>
      </Card>



      <Card title='网格型内嵌卡片' style={{ marginTop: 10, }} >
        <Card title="Card Title">
          <Card.Grid style={gridStyle}>Content</Card.Grid>
          <Card.Grid hoverable={false} style={gridStyle}> Content </Card.Grid>
          <Card.Grid style={gridStyle}>Content</Card.Grid>
          <Card.Grid style={gridStyle}>Content</Card.Grid>
          <Card.Grid style={gridStyle}>Content</Card.Grid>
          <Card.Grid style={gridStyle}>Content</Card.Grid>
          <Card.Grid style={gridStyle}>Content</Card.Grid>
        </Card>
      </Card>

      <Card title='支持更多内容配置' style={{ marginTop: 10, }} >
        <Card
          style={{ width: 300 }}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <Icon type="setting" key="setting" />,
            <Icon type="edit" key="edit" />,
            <Icon type="ellipsis" key="ellipsis" />,
          ]}
        >
          <Card.Meta
            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
            title="Card title"
            description="This is the description"
          />
        </Card>
      </Card>



    </>

  }
}



// API#
// <Card title="卡片标题">卡片内容</Card>
// ☝️Card#
// 参数	                           说明	类型	默认值	版本
// actions	                      卡片操作组，位置在卡片底部	Array<ReactNode>	-	
// activeTabKey	                  当前激活页签的 key	string	-	3.3.0
// headStyle	                    自定义标题区域样式	object	-	3.8.0
// bodyStyle	                    内容区域自定义样式	object	-	
// bordered	                      是否有边框	boolean	true	
// cover	                        卡片封面	ReactNode	-	
// defaultActiveTabKey	          初始化选中页签的 key，如果没有设置 activeTabKey	string	第一个页签	3.3.0
// extra	                        卡片右上角的操作区域	string|ReactNode	-	
// hoverable	                    鼠标移过时可浮起	boolean	false	
// loading	                      当卡片内容还在加载中时，可以用 loading 展示一个占位	boolean	false	
// tabList	                      页签标题列表	Array<{key: string, tab: ReactNode}>	-	
// tabBarExtraContent	            tab bar 上额外的元素	React.ReactNode	无	
// size	                          card 的尺寸	default | small	default	3.12.0
// title	                        卡片标题	string|ReactNode	-	
// type	                          卡片类型，可设置为 inner 或 不设置	string	-	
// onTabChange	                  页签切换的回调	(key) => void	-	

// ☝️Card.Grid#
// 参数	                           说明	类型	默认值	版本
// className	                    网格容器类名	string	-	
// hoverable	                    鼠标移过时可浮起	boolean	true	3.23.0
// style	                        定义网格容器类名的样式	object	-	

// ☝️Card.Meta#
// 参数	                           说明	类型	默认值	版本
// avatar	                        头像/图标	ReactNode	-	
// className	                    容器类名	string	-	
// description	                  描述内容	ReactNode	-	
// style	                        定义容器类名的样式	object	-	
// title	                        标题内容	ReactNode	-	
